<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  </head>
  <body>
    <div id="test"></div>

    <script type="text/babel">
      // 创建学习类
      class Study extends React.Component {
        state = {
          // inpValue: "",
          list: [],
        };

        // inpEl = React.createRef();

        addList = () => {
          // let { current: input } = this.inpEl;
          let { list } = this.state;
          {
            /* 修改state对象中的list数组 */
          }
          this.setState({
            list: [...list, this.inpEl.value],
          });
        };

        deleteItem = (index) => {
          let { list } = this.state;
          list.splice(index, 1);
          this.setState({
            list: list,
          });
        };

        componentWillMount() {
          axios
            .post(
              "https://www.fastmock.site/mock/1067b8b6cb8580eddf730b26f9008bdb/test01/fuwu?data=data"
            )
            .then((res) => {
              // console.log(
              //   "axios 请求数据成功：" + JSON.stringify(res.data.data)
              // );
              let { list } = this.state;
              console.log(list);
              let data = JSON.parse(JSON.stringify(res.data.data));
              this.setState({
                list: data,
              });
            })
            .catch((err) => {
              console.error("axios 请求失败：" + err);
            });
        }

        render() {
          return (
            <div>
              <div>
                {/* 添加ref记录input输入的值 */}
                <input type="text" ref={(el) => (this.inpEl = el)} />
                <button onClick={this.addList}>下一步修炼</button>
              </div>
              <ul>
                {this.state.list.map((item, index) => {
                  return (
                    <li key={index} onClick={this.deleteItem}>
                      {item}
                    </li>
                  );
                })}
              </ul>
            </div>
          );
        }
      }

      // 渲染数据
      ReactDOM.render(<Study />, document.getElementById("test"));
    </script>
  </body>
</html>
